---
group: 'components'
category: 'state'
title: Form
description: '表单'
order: 1
---

## 基础用法

表单控件，用于创建一个实体或收集信息，需要对输入对数据类型进行校验时。

```js live=true
() => {
  const onFinish = (values) => {
    console.log(values);
  };
  return (
    <Form onFinish={onFinish} initialValues={{ username: 'wayne' }}>
      <Row gutter={[10, 40]}>
        <Col span={6}>
          <FormItem
            name="username"
            label="Username"
            help="user name must input"
            rules={[{ required: true, message: 'Please input your username!' }]}
          >
            <Input />
          </FormItem>
        </Col>
        <Col span={6}>
          <FormItem
            name="uid"
            label="用户名"
            help="help content"
            rules={[{ required: true, message: 'Please input your uid!' }]}
          >
            <Input />
          </FormItem>
        </Col>
        <Col span={6}>
          <FormItem name="group" label="Group" help="help content" tooltip="tooltip 内容 content">
            <Input />
          </FormItem>
        </Col>
        <Col span={6}>
          <FormItem label="BACKUP_DATE" name="cycle">
            <CheckboxGroup>
              <Checkbox label="China" value="China" />
              <Checkbox label="USA" value="USA" />
            </CheckboxGroup>
          </FormItem>
        </Col>
        <Col span={6}>
          <FormItem label="Radio" name="radio">
            <RadioGroup>
              <Radio label="China" value="China" />
              <Radio label="USA" value="USA" />
            </RadioGroup>
          </FormItem>
        </Col>
      </Row>
      <button type="submit">Submit</button>
    </Form>
  );
};
```

## 动态表单

可以新增表单项格数，自定义表单项的输入内容

```js live=true
() => {
  const [form] = useForm();
  const getFieldErrors = () => {
    console.log(form.validateFields());
  };
  const onFinish = (values) => {
    console.log(values);
  };
  const { Add, Trash } = KubeIcon;
  return (
    <Form onFinish={onFinish} form={form}>
      <FormList name="users">
        {(fields, { add, remove }) => (
          <>
            {fields.map(({ key, name, ...restField }) => (
              <Row gutter={[10, 40]} key={key}>
                <Col span={5}>
                  <FormItem
                    {...restField}
                    name={[name, 'first']}
                    label="Fist Name"
                    help="user name must input"
                    rules={[{ required: true, message: 'Please input your username!' }]}
                  >
                    <Input />
                  </FormItem>
                </Col>
                <Col span={5}>
                  <FormItem
                    {...restField}
                    name={[name, 'last']}
                    label="Last Name"
                    help="help content"
                    rules={[{ required: true, message: 'Please input your uid!' }]}
                  >
                    <Input />
                  </FormItem>
                </Col>
                <Col span={1}>
                  <Button variant="text" onClick={() => remove(name)}>
                    <Trash size={16} />
                  </Button>
                </Col>
              </Row>
            ))}
            <Row>
              <Col span={12}>
                <Button onClick={() => add()}>
                  <Add size={16} />
                </Button>
              </Col>
            </Row>
          </>
        )}
      </FormList>
      <button type="button" onClick={getFieldErrors}>
        Submit
      </button>
    </Form>
  );
};
```
